import React, { useContext } from "react";
import ReactDOM from "react-dom";
import zhCN from 'antd/lib/locale/zh_CN';
import { BrowserRouter as Router, Route } from "react-router-dom";
import { ConfigProvider } from 'antd';

import { globalContext, GlobalStateProvider } from "@/service/globalState";

import 'antd/dist/antd.css';

import './assets/css/style.css';

import Header from "@/components/header";
import Menu from "@/components/menu";

import Invite from "./pages/invite";
import Seller from "./pages/seller";
import MyCenter from "./pages/myCenter"
import SellerGroup from "./pages/sellerGroup"
import SellerTongji from "./pages/seller/tongji"
import SellerGroupTongji from "./pages/sellerGroup/tongji"
import MyInfo from "./pages/myInfo"
import Login from "./pages/login"
import BindPhone from "./pages/bindPhone"
import UserPhone from "./pages/userPhone"


const RenderPage: React.FC = () => {
    const globalData = useContext(globalContext);
    const role = localStorage.getItem('role');
    const url = window.location.search;
    const RouteWithMenu = ({ component: Component, ...rest }) => (
        <Route exact {...rest} render={props => {
            return <>

                <Component {...props} />
                <Menu />

                {/* <Header title={globalData.pageTitle} />
                    <div className="page-main">
                        <Component {...props} />
                    </div> */}
            </>
        }
        } />
    )
    return (
        <ConfigProvider locale={zhCN}>
            <Router>

                <Route path="/login" component={Login} />
                <Route path="/bindPhone" component={BindPhone} />
                <Route path="/userPhone" component={UserPhone} />

                <RouteWithMenu exact path="/seller" component={Seller} />
                <RouteWithMenu exact path="/sellertongji" component={SellerTongji} />
                <RouteWithMenu exact path="/" component={MyCenter} />
                {
                    role === "2" && <RouteWithMenu path="/sellergroup" component={SellerGroup} />
                }
                {
                    role === "2" && <RouteWithMenu path="/sellergrouptongji" component={SellerGroupTongji} />
                }
                {
                    (role === "1" || role === "0") && <RouteWithMenu path="/myinfo" component={MyInfo} />
                }
                <RouteWithMenu exact path="/invite" component={Invite} />
            </Router>
        </ConfigProvider>
    )
}

ReactDOM.render(
    <>
    <GlobalStateProvider>
                <Header />
        <RenderPage />
    </GlobalStateProvider>
        </>
    ,
    document.getElementById("root")
);